<template>
	<div class="tabs-footer">
		<div class="footer">
			<div class="li" v-for="(item,index) in tabbarDes" @click="toPage(item.page)">
				<img v-if="item.page == tab" class="icon" :src="item.activeImg">
				<img v-else class="icon" :src="item.normalImg">
				<div class="name" :class="item.page == tab ? 'on': '' " >{{item.txt}}</div>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		name: "tabs-footer",
		props: {
			tab: {type: String},
			type: {type: String,default: "text"},
		},
		data() {
			return {
				tabbarDes: [{
						txt: this.$t('menu.Trading'),
						page: 'Trading',
						normalImg: require('../../assets/tabbar/Trading_default.png'),
						activeImg: require('../../assets/tabbar/Trading_click.png')

					}, {
						txt: this.$t('menu.Order'),
						page: 'Order',
						normalImg: require('../../assets/tabbar/Order_default.png'),
						activeImg: require('../../assets/tabbar/Order_click.png')
					}, {
            txt: this.$t('aut.tab'),
            page: 'Automatic',
            normalImg: require('../../assets/tabbar/tab3.png'),
            activeImg: require('../../assets/tabbar/tab3_on.png')
          },
					{
						txt: this.$t('menu.My'),
						page: 'My',
						normalImg: require('../../assets/tabbar/My_default.png'),
						activeImg: require('../../assets/tabbar/My_click.png')
					}
				]
			};
		},
		methods: {
			toPage(e) {
				console.log(e)
				if(this.tab != e){
					this.$router.push({name: e })			
				}
			}

		},
	}
</script>

<style lang="scss" scoped>
	.tabs-footer {
		height: 120px; 
		.footer{
			position: fixed; z-index: 999;
			left: 0px; bottom: 0px;
			width: 100%;height: 120px;
			background: rgba(0, 0, 0, 0.8);
			overflow: hidden;  display: flex;
		}

		.li {
			flex: 1;
			text-align: center;
			margin: 20px 0px;

			.icon {
				height: 50px;
			}

			.name {
				height: 30px;
				line-height: 30px;
				&.on{color: #07ACCA;}
			}
		}
	}
</style>
